<template>
  <div class="com-title">
    <div class="title-info">
      <i class="line"></i>
      <div>{{title}}</div>
      <nuxt-link class="link" v-if="to" :to="to">
        <span>{{toText}}</span>
        <a-icon type="double-right" />
      </nuxt-link>

    </div>
    <div v-if="tabs.length" class="title-tags">
      <a-icon type="tags" />
    </div>
  </div>
</template>

<script>
export default {
  name: "com-title",
  props: {
    title: {
      type: String,
      default: '最新电视剧'
    },
    tabs: {
        type: Array,
        default: function () {
          return []
        }
    },
    to: {
      type: String,
      default: ''
    },

    toText: {
      type:String,
      default: '更多'
    }
  }
}
</script>

<style scoped lang="scss">
.com-title {
  display: flex;
  line-height: 40px;
  font-size: 22px;
  color: $title-color;
  font-weight: 400;
  .title-info {
    display: flex;
    .line {
      margin: 10px 10px 0 0;
      @include wh(4px, 20px);
      background: $success-color;
    }

    .link {
      margin: 0 20px;
      font-size: 12px;
    }
  }
}
</style>
